<template>
  <div class="monitor-dialog" :style="styleObj">
    <c-move @move="onMove" class="monitor-dialog__header">
      <div class="monitor-dialog__title">
        <span>订单监控</span>
      </div>
      <button type="button" aria-label="Close" class="monitor-dialog__headerbtn" @click="onClose">
        <i class="el-icon-close"></i>
      </button>
    </c-move>
    <div class="monitor-dialog__content">
      <div class="monitor-dialog__container">
        <div>
          当前用户出票
          <span class="font-bold font-green">绿色成功</span>
          <span class="font-bold font-red">红色失败</span>
          <span class="font-bold font-blue">蓝色超时</span>
        </div>
        <el-form size="mini" :model="searchForm"
                 onkeydown="if(event.keyCode==13){return false;}" @keyup.native.enter="onSearch">
          <el-form-item>
            <el-input
              v-focus
              placeholder="输入PNR或航空公司二字码"
              v-model="searchForm.param">
              <div slot="suffix" class="el-input__icon">
                <el-button size="mini" type="text" @click="onSearch">
                  <i class="el-icon-search"></i>
                </el-button>
              </div>
            </el-input>
          </el-form-item>
        </el-form>
        <div>
          全部(
          <span class="font-green">{{detail.successNum}}</span>
          <span class="font-red">{{detail.failureNum}}</span>
          <span class="font-blue">{{detail.overtimeNum}}</span>)
        </div>
        <div class="monitor-dialog__box">
          <el-row>
            <el-col :span="12" v-for="(item, idx) in detail.orderList" :key="idx">
              [{{item.ownerAirline}}<a :class="item.orderStatus | colorFilter" :href="'#/air-order-manage/order-issue-detail?localOrderId=' + item.localOrderId" target="_blank">{{item.orderStatusStr}}</a>]{{item.pnr}}
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'OrderMonitor',
  props: {
    visible: Boolean
  },
  data () {
    return {
      timer: null,
      position: {
        bottom: 20,
        right: 20
      },
      searchForm: {
        param: ''
      },
      query: {
        param: ''
      },
      detail: {
        allNum: 0,
        successNum: 0,
        failureNum: 0,
        overtimeNum: 0,
        orderList: []
      }
    }
  },
  filters: {
    colorFilter (v) {
      const status = v + ''
      if (status === '4') {
        return 'font-green'
      } else if (status === '9') {
        return 'font-red'
      } else if (status === '2' || status === '3') {
        return 'font-blue'
      }
    }
  },
  computed: {
    styleObj () {
      return {
        bottom: this.position.bottom + 'px',
        right: this.position.right + 'px'
      }
    }
  },
  created () {
    this.loadData()
    this.timer = setInterval(this.loadData.bind(this), 10000)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    loadData () {
      this.$service.order.orderMonitor(this.query).then(res => {
        this.detail = res.data
      })
    },
    onClose () {
      this.$emit('close')
    },
    onMove (e) {
      this.position.bottom = this.position.bottom - e.offsetY
      this.position.right = this.position.right - e.offsetX
    },
    onSearch () {
      Object.assign(this.query, this.searchForm)
      this.loadData()
    }
  }
}
</script>

<style scoped>
.monitor-dialog {
  position: absolute;
  border: 1px solid #ebeef5;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  width: 340px;
  z-index: 10;
}

.monitor-dialog__header {
  position: relative;
  padding: 15px 15px 10px;
  cursor: move;
}

.monitor-dialog__title {
  padding-left: 0;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 1;
  color: #303133;
}

.monitor-dialog__headerbtn {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 0;
  border: none;
  outline: 0;
  background: 0 0;
  font-size: 16px;
  cursor: pointer;
}

.monitor-dialog__content {
  position: relative;
  padding: 10px 15px;
  color: #606266;
  font-size: 14px;
}

.monitor-dialog__container {
  background-color: #f1f1f3;
}

.monitor-dialog__box {
  font-size: 12px;
  height: 300px;
  overflow: auto;
  border: 1px solid #ebeef5;
  background-color: white;
}
</style>
